<template>
    <el-container style="height: 700px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-col>
                <h3>freeary</h3>
                <el-menu
                        default-active="1"
                        class="el-menu-vertical-demo">
                    <el-menu-item index="1" @click="dynComponent = 'WriteDiary'">
                        <i class="el-icon-edit-outline"></i>
                        <span slot="title">WRITE</span>
                    </el-menu-item>
                    <el-menu-item index="2" @click="dynComponent = 'tableData'">
                        <i class="el-icon-search"></i>
                        <span slot="title">READ</span>
                    </el-menu-item>
<!--                    <el-menu-item index="3" @click="dynComponent = 'Setting'">-->
<!--                        <i class="el-icon-document"></i>-->
<!--                        <span slot="title">设置</span>-->
<!--                    </el-menu-item>-->
                </el-menu>
            </el-col>
        </el-aside>

        <el-container>
            <el-header style="text-align: right; font-size: 12px;height: 40px">
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span style="margin-right: 50px">{{tokenId}}</span>
            </el-header>

            <el-main>
                <keep-alive>
                    <component v-if="flag" :is="dynComponent" :id="id" :tokenId="tokenId"></component>
                </keep-alive>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    import tableData from "../components/TableData";
    import WriteDiary from "../components/WriteDiary";
    import Setting from "../components/Setting";

    export default {
        name: "index",
        data() {
            return {
                dynComponent: WriteDiary,
                id: '',
                tokenId: '',
                flag: false,
                data: [], //数据
            }
        },
        components: {
            WriteDiary,
            tableData,
            // Setting
        },
        methods: {
            checkToken(token, id) {
                this.$http.post('/user/checkToken', {
                    id: id,
                    token: token
                }).then(res => {
                    console.log(res.data);
                    if (res.data.message === '重新登陆') {
                        this.$router.push("/");    //去 登录 页面
                        return
                    }
                    this.tokenId = res.data.data;
                    if (!res.data.flag) {
                        this.$message.error(res.data.message);
                        setTimeout(() => {
                            // this.$router.push("/" + res.data.data);   //去 /{id} 页面
                            window.location.replace("#/" + res.data.data)
                            window.location.reload()  //去 /{id} 页面
                            // window.location.href = "#/" + res.data.data
                        }, 1500);
                    } else {
                        this.flag = true  // 异步请求之后再显示组件
                    }
                }).catch(res => {
                    console.log(res)
                });
            },
            // 退出登录
            logout() {
                console.log('退出登录...')
                sessionStorage.clear()
                this.$router.push("/")
            }
        },

        created() {
            this.id = this.$route.path.substring(1)  //  /{id} 变为 {id}
            let token = sessionStorage.getItem('token')
            // let token = this.$token
            this.checkToken(token, this.id)
        }
    }
</script>


<style scoped>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 40px;
    }

    .el-aside {
        color: #333;
    }
</style>
